import  React,{Fragment} from  'react'
const FancyButton = React.forwardRef((props, ref) => (
    <div>
        <input type="text" ref={ref}/>
        {props.children}
    </div>
));



export default class refs extends React.Component {
    constructor(props) {
        super(props);
        this.fancyButtonRef = React.createRef();
        this.focus=this.focus.bind(this)
    }
    focus(){
        console.log(this.fancyButtonRef)
        this.fancyButtonRef.current.focus();

    }
    componentDidMount() {
        console.log('ref', this.ref);
        //this.ref.current.classList.add('primary'); // 给FancyButton中的button添加一个class
        //this.ref.current.focus(); // focus到button元素上
    }

    render() {
        return (
            //<div>ssa</div>
            <Fragment>
                <FancyButton ref={this.fancyButtonRef}>

                </FancyButton>
                <div onClick={this.focus}>
                    点我聚焦
                </div>
            </Fragment>


        );
    }
}